<template>
  <div class="text-center mb-4">
    <h1 class="text-2xl md:text-3xl font-bold text-light mb-2">贪吃蛇游戏</h1>
    <div class="bg-dark rounded-lg p-3 shadow-lg">
      <div class="flex justify-center gap-8 text-light">
        <div>分数: <span class="font-bold text-primary">{{ score }}</span></div>
        <div>最高分: <span class="font-bold text-primary">{{ highScore }}</span></div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  score: {
    type: Number,
    required: true
  },
  highScore: {
    type: Number,
    required: true
  }
})
</script>

<style scoped>
.bg-dark {
  background-color: #111;
}
.text-light {
  color: #f5f5f5;
}
.text-primary {
  color: #4CAF50;
}
.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
}
</style>
    